<!-- 卡片列表 -->
<page-header [title]="'{{ 'menu.list.cardlist' | translate }}'" [extra]="extra">
  <ng-template #extra>
    <div style="margin-top: -60px; text-align: center; width: 195px;">
      <img class="img-fluid" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png" />
    </div>
  </ng-template>
  段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
  <div class="d-flex pt-md">
    <a class="d-flex pr-lg">
      <!-- 快速开始 -->
      <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />
      {{ 'quick.start' | translate }}
    </a>
    <a class="d-flex pr-lg">
      <!-- 产品简介 -->
      <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />
      {{ 'product.introduction' | translate }}
    </a>
    <a class="d-flex">
      <!-- 产品文档 -->
      <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />
      {{ 'product.document' | translate }}
    </a>
  </div>
</page-header>
<nz-list
  [nzLoading]="loading"
  [nzDataSource]="list"
  [nzRenderItem]="item"
  [nzGrid]="{ gutter: 24, lg: 8, md: 12, sm: 24, xs: 24 }"
>
  <ng-template #item let-item>
    <nz-list-item>
      <button
        *ngIf="item === null"
        nz-button
        (click)="msg.success('add')"
        [nzType]="'dashed'"
        style="width: 100%; height: 183px;"
      >
        <i nz-icon type="plus"></i>
        <!-- 新增产品 -->
        <span> {{ 'button.add' | translate }}{{ 'product' | translate }}</span>
      </button>
      <nz-card nzHoverable *ngIf="item !== null" [nzActions]="[op1, op2]">
        <ng-template #op1>
          <!-- 操作一 -->
          <a (click)="msg.success('操作一：' + item.id)"> {{ 'table.operation' | translate }}{{ 'one' | translate }}</a>
        </ng-template>
        <ng-template #op2>
          <!-- 操作二 -->
          <a (click)="msg.success('操作二：' + item.id)"> {{ 'table.operation' | translate }}{{ 'two' | translate }}</a>
        </ng-template>
        <nz-card-meta [nzAvatar]="nzAvatar" [nzTitle]="nzTitle" [nzDescription]="nzDescription">
          <ng-template #nzAvatar>
            <nz-avatar nzSize="large" [nzSrc]="item.avatar"></nz-avatar>
          </ng-template>
          <ng-template #nzTitle>
            <a (click)="msg.success('标题：' + item.id)">{{ item.title }}</a>
          </ng-template>
          <ng-template #nzDescription>
            <ellipsis>{{ item.description }}</ellipsis>
          </ng-template>
        </nz-card-meta>
      </nz-card>
    </nz-list-item>
  </ng-template>
</nz-list>
